<template>
    <div class="only-video">
        <div class="up-video clear-fix">
            <div><router-link to="/video_only/only_up/0"><img src="../../assets/上传单一视频.png" alt=""><p>上传单一视频</p></router-link></div>
            <div><router-link to="/video_seriec/seriec_up/0"><img src="../../assets/上传系列视频.png" alt=""><p>上传系列视频</p></router-link></div>
        </div>
        <div class="video-select clear-fix">
            <div class="select-price">
                <span>价钱:</span>
                <el-select v-model="selectPrice" placeholder="请选择">
                    <el-option
                    v-for="item in videoPrice"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="select-subject">
                <span>科目:</span>
                <el-select v-model="selectSubject" placeholder="请选择">
                    <el-option
                    v-for="item in videoSubject"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="select-status">
                <span>状态:</span>
                <el-select v-model="selectStatus" placeholder="请选择">
                    <el-option
                    v-for="item in videoStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="video-list">
            <el-table
                :data="videoList"
                @row-click="editVideo"
                stripe
                style="width: 100%">
                <el-table-column
                label="名称"
                align="center"
                width="380">
                <template slot-scope="scope">
                    <span class="row-img"><img class="imageStyle" :src="scope.row.courseVideoUrl" alt=""></span>
                    <div class="row-txt">
                        <span>{{scope.row.courseName}}</span>
                    </div> 
                </template> 
                </el-table-column>
                <el-table-column
                align="center"
                label="费用">
                <template slot-scope="scope">
                    <span style="color:#f39c12;font-size:18px;font-weight:600;" v-if="!scope.row.money">免费</span>
                    <span style="color:#f93a3a;" v-else>￥{{scope.row.money}}</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="subjectLevel"
                align="center"
                label="科目">
                </el-table-column>
                <el-table-column
                align="center"
                label="上传时间">
                <template slot-scope="scope">
                    {{utils.parseDate(scope.row.time)}}
                </template> 
                </el-table-column>
                <el-table-column
                prop="address"
                align="center"
                label="审核状态">
                 <template slot-scope="scope">
                    <span style="color:#f93a3a;" v-if="scope.row.status==0">审核中</span>
                    <span style="color:#999;" v-else-if="scope.row.status==1">审核通过</span>
                    <span style="color:#f39c12;" v-else>审核失败</span>
                </template> 
                </el-table-column>
            </el-table>
        </div>
        <div class="video-page clear-fix">
           <div>
                <el-pagination
                background
                :page-size="10"
                layout="prev, pager, next"
                @current-change="getPage"
                :current-page.sync="currentPage"
                :total="totalPage">
                </el-pagination>
            <div class="page-skip">
                <span>共{{totalPage}}页，去第</span>
                <input type="text" v-model="directPage">
                <span>页</span>
                <input @click="directlyTo" type="button" value="确定">
            </div>
           </div>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            videoPrice: [], //价钱选择
            videoSubject: [], //科目选择
            videoStatus: [], //状态选择
            selectPrice: '', //选中价钱
            selectSubject: '', //选中科目
            selectStatus: '', //选中状态
            videoList: [], //单一视频列表
            totalPage: 0, //总条数
            directPage: 10,
            currentPage: 1 //当前页
        }
    },
    created() {
        // 获取单一视频
        this.getVideList()
    },
    methods: {
        getPage(page) {
           this.currentPage = page
           this.getVideList()
        },
        // 直接前往
        directlyTo() {
            this.currentPage = +this.directPage
            if(this.currentPage > this.totalPage){
                return
            }
            this.getVideList()
        },
        getVideList() {
            // 获取单一视频
            this.utils.$get(
                this.utils.GET_VIDEO_LIST,
                res => {
                    this.videoList = res.data || []
                    this.totalPage = Math.ceil(this.videoList.length /10)
                },
                { type: 0, page: this.currentPage }
            )
        },
        // 点击编辑视频
        editVideo(row){
            if(row.status == 0){
                return this.$message.error('请等待视频审核完毕……')
            }
            this.$router.push({path:'/video_only/only_up/'+row.id})
        }
    }
}
</script>


<style lang="less">
.only-video {
    .up-video {
        height: 190px;
        background-color: #f6f6f6;
        > div {
            margin-top: 30px;
            > a {
                float: right;
                > p {
                    margin-top: 14px;
                }
            }
            &:first-child {
                padding-right: 200px;
                float: left;
                width: 50%;
            }
            &:last-child {
                float: left;
                width: 50%;
                padding-left: 200px;
                > a {
                    float: left;
                }
            }
        }
    }
    .video-select {
        margin-top: 40px;
        height: 80px;
        > div {
            float: left;
            margin-right: 40px;
        }
    }
    .video-list {
        .el-table__header-wrapper {
            border-bottom: 1px solid;
        }
        .cell {
            color: #232323;
            font-size: 16px;
            text-align: cneter !important;
        }
    }
    .video-page {
        height: 50px;
        padding: 60px 0;
        > div {
            float: right;
        }
        .el-pager {
            .number,
            .more {
                background-color: #fff;
                border: 1px solid #ccc;
                height: 35px;
                width: 35px;
            }
        }
        .btn-next,
        .btn-prev {
            background-color: #fff;
            border: 1px solid #ccc;
            height: 35px;
            width: 35px;
        }
        .page-skip {
            float: left;
            > input {
                height: 35px;
                border-radius: 2px;
                &:nth-child(2) {
                    width: 50px;
                    border: 1px solid #ccc;
                    padding: 5px;
                    text-align: center;
                }
                &:nth-child(4) {
                    background-color: #fff;
                    width: 50px;
                    border: 1px solid #ccc;
                }
            }
        }
        .el-pagination {
            float: left;
        }
    }
    .row-img {
        .imageStyle {
            float: left;
            width: 160px;
            height: 106px;
        }
    }
    .row-txt {
        float: right;
        width: 80px;
        height: 70px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        display: table;
        vertical-align: middle;
        span {
            font-weight: 600;
            text-align: left;
            display: table-cell;
            vertical-align: middle;
        }
    }
}
</style>

